<template>
	<view class="main">
		
		<uni-card >
			<uni-grid :column="5" :showBorder="false" :square="false">
				<uni-grid-item v-for="item in menusList" :key="item.id">
					<view class="menuItem"  @click="toHeaderMenu(item.id)">
						<div class="icon">
							<image :src="item.image" style="width:100%;height:100%"></image>
							<uni-badge style="position: absolute;top:-10%;right:0" :text="item.badgeNum" v-if="item.badgeNum"></uni-badge>
						</div>
						<text class="text">{{item.title}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>

		</uni-card>

		<uni-card>
			<div class="daka">
				<div class="left">
					<image src="/static/icons/签到打卡.png" style="width:50rpx;height:50rpx"></image>
					<text class="text">每日打卡 奖励多多</text>
				</div>
				<view class="quwancheng">去完成</view>

			</div>
		</uni-card>
		
		<uni-grid :column="2" :showBorder="false" :square="false">
			<uni-grid-item >
				<view style="margin-left: 15px;margin-right: 5px">
					<view class="menu2Item" style="background: linear-gradient(to right, #f17ca42e, #f17ca480)">
						<text class="text" style="color: #9C27B0;">消费记录</text>
						<image src="/static/icons/消费记录.png" style="width:100rpx;height:100rpx;right:5%"></image>
					</view>
				</view>
				
			</uni-grid-item>
			<uni-grid-item >
				<view style="margin-left: 5px;margin-right: 15px;">
					<view class="menu2Item" style="background: linear-gradient(to right, #2196f354, #2196f373) ">
						<text class="text" style="color: #3F51B5;">休闲计划</text>
						<image src="/static/icons/健身计划.png" style="width:100rpx;height:100rpx;right:10%"></image>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		
		<uni-grid :column="1" :showBorder="false" :square="false">
			<uni-grid-item >
				<view class="bizuoshiqing">
					<view class="menu3Item" style="background: linear-gradient(to right, #bb4d9454, #bb4d9494)">
						<div class="left">
							<text class="text" style="color: #9C27B0;">情侣必做的100件小事</text>
							<div class="progress">
								<div class="progressRoot">
									<div class="progressanimation" :style="{'width':progressNum+'%'}"></div>
								</div>
								<text  style="color: #333;font-size:20rpx">1/100</text>
							</div>
						</div>
						<image src="/static/icons/去约会-copy.png" style="width:100rpx;height:100rpx;right:5%"></image>
					</view>
				</view>
				
			</uni-grid-item>
		</uni-grid>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
    import {menusList,progressNum,toHeaderMenu} from './hooks.js'
	import {checkToken} from '../../api/common.js'
	
	checkToken()
</script>

<style lang="scss">
	.uni-card {
		border-radius: 20rpx !important;
	}
	.main {
		padding-top: 50rpx;
		// background-color: red;
	}
	.menuItem {


		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.icon {

			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 56rpx;
			}
		}

		.text {
			font-size: 18rpx;
		}
	}

	.daka {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			justify-content: start;
			align-items: center;
		}

		.quwancheng {
			width: 100rpx;
			height: 50rpx;
			border-radius: 50rpx;
			line-height: 50rpx;
			padding: 0 10px;
			text-align: center;
			color: #fff;
			background-color: $uni-color-primary;
		}
	}
	
	.menu2Item {
		width: 100%;
		height: 150rpx;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		.text {
			font-size: 24rpx;
			font-weight: 600;
		}
		image {
			position: absolute;
			bottom: 5%;
			right: 10%;
		}
	}
	
	.bizuoshiqing {
		margin-top: 30rpx;
		margin: 30rpx 15px 0 15px;
		.menu3Item {
			width: 100%;
			height: 150rpx;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: start;
			.left {
				margin-top: 20rpx;
				.progress {
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.progressRoot {
						margin-right: 20rpx;
						width: 200rpx;
						height: 20rpx;
						background-color: #fff;
						border-radius: 20rpx;
						overflow: hidden;
						.progressanimation {
							
							height: 20rpx;
							background-color: palevioletred;
						}
					}
				}
				.text {
					font-size: 24rpx;
					font-weight: 600;
				}
			}
			image {
				position: absolute;
				bottom: 5%;
				right: 10%;
			}
		}
	}
</style>